<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div *ngIf="dataSources"
     (click)="toggleDataSourceList($event)"
     (clickOutside)="isShowDataSourceOpts = false"
     [class.ddp-selected]="isShowDataSourceOpts" class="ddp-data-in">
  <em class="ddp-icon-database3"></em>
  <span class="ddp-txt-namesub">{{ selectedDataSource?.name }}</span>
  <em class="ddp-icon-view"></em>
  <a *ngIf="isEnableInfo" (click)="triggerShowInfo()" href="javascript:" class="ddp-btn-info"></a>
  <!-- box layout -->
  <div class="ddp-box-layout4 {{isEnableEditAssociationJoin ? 'ddp-datasearch' : 'ddp-datasource'}}">
    <!-- 검색 영역 -->
    <component-input
      [compType]="'search'"
      [value]="searchText"
      [immediately]="true"
      [optionalStyle]="'width:86%;'"
      [placeHolder]="'msg.board.custom.ui.placeholder' | translate"
      (changeValue)="searchText = $event"></component-input>
    <!-- // 검색 영역 -->

    <!-- 목록 영역 -->
    <div class="ddp-ui-list-type" >
      <ul class="ddp-list-type ddp-list-popup" >
        <li *ngFor="let dsInfo of dataSources | baseFilter : ['name', searchText]"
            (click)="$event.stopPropagation();selectDataSource(dsInfo);"
            [class.ddp-selected]="dsInfo.valid && selectedDataSource?.id === dsInfo.id"
            [class.ddp-disabled]="!dsInfo.valid"
            title="{{ dsInfo.name }}">
          <a href="javascript:">
            <em class="ddp-icon-database-s"></em>
            <span class="ddp-data-name">{{ dsInfo.name }}</span>
            <em  *ngIf="canChangeDataSourceMode" [style]="'position:absolute; top:50%; right:30px; margin-top:-8px'"
                 (click)="changeBoardDataSource(dsInfo)"class="ddp-btn-option"></em>
            <em class="ddp-icon-check"></em>
          </a>
        </li>
      </ul>
    </div>
    <!-- // 목록 영역 -->
    <!-- 데이터소스 수정 링크 -->
    <a *ngIf="isEnableEditAssociationJoin" href="javascript:" class="ddp-link-join" (click)="updateBoardDataSource()">
      {{ 'msg.board.custom.ui.edit.association.join' | translate }}<em class="ddp-btn-option"></em>
    </a>
    <!-- // 데이터소스 수정 링크 -->
  </div>
  <!-- //box layout -->
</div>
